<template>
	<view class="update_yang_zhi_box bgc_eee" :style="{height: windowHeight + 'px'}">
		<!-- 标题 -->
		<view class="title_box pv_20 text_center flex_column_between">
			<view class="title1">
				<text class="title vertical_text mn fs_36_i mainColor fw_bold">ᠦᠨᠳᠦᠰᠦᠨ ᠪᠠᠢᠳᠠᠯ᠎ᠢ ᠵᠠᠰᠠᠬᠤ</text>
			</view>
		</view>
		
		<!-- content box -->
		<view class="content_box p_10 border_box">
			<view class="w_full h_260 border_box">
				<view class="w_full h_full border_radius_10 bgc_fff">
					
				</view>
			</view>
			
			<!-- 耳标 -->
			<view class="w_full h_80 flex_row_between mt_10 mb_10">
				<view class="w_20_p h_full border_radius_10 bgc_fff text_center">
					<text class="vertical_text mn text_center fs_36">ᠴᠢᠬᠢᠨ ᠨᠣᠮᠧᠷ</text>
				</view>
				<view class="num_input_box w_65_p h_full">
					<input type="text" class="full border_radius_10 bgc_fff" v-model="erBiaoHao">
				</view>
				<view class="icon_box w_12_p h_full lh_80 bgc_1c9aa0 border_radius_10 text_center">
					<i class="iconfont icon-iconfontscan color_fff fs_40_i" @click="saoMiaoTiaoMa()"></i>
				</view>
			</view>
			
			<view class="w_full border_radius_10 bgc_fff p_10 border_box">
				<!-- 性别 -->
				<view class="w_full flex_row_between">
					<view class="w_30_p h_full text_center">
						<text class="vertical_text mn text_center fs_36">ᠬᠦᠢᠰᠦ</text>
					</view>
					<view class="w_30_p text_center pv_10 border_box bgc_eee border_radius_10 text_center" @click="showBottomSheet(0)">
						<text class="vertical_text mn text_center fs_36">{{ cattleInfo.xingBie || 'ᠰᠣᠩᠭᠤᠬᠤ' }}</text>
					</view>
				</view>
				
				<!-- 品种 -->
				<view class="w_full h_100 flex_row_between mt_10">
					<view class="w_30_p h_full text_center">
						<text class="vertical_text mn text_center fs_36">ᠲᠥᠷᠦᠯ ᠵᠦᠢᠯ</text>
					</view>
					<view class="w_30_p h_full text_center bgc_eee border_radius_10 pv_10 border_box" @click="showBottomSheet(1)">
						<text class="vertical_text mn text_center fs_36">{{ cattleInfo.pinZhong || 'ᠰᠣᠩᠭᠤᠬᠤ' }}</text>
					</view>
				</view>
				
				<!-- 毛色特征 -->
				<view class="w_full h_100 flex_row_between mt_10">
					<view class="w_30_p h_full text_center">
						<text class="vertical_text mn text_center fs_36">ᠦᠰᠦᠨ᠎ᠦ ᠥᠩᠭᠡ</text>
					</view>
					<view class="w_30_p h_full text_center bgc_eee border_radius_10 pv_10 border_box" @click="showBottomSheet(2)">
						<text class="vertical_text mn text_center fs_36">{{ cattleInfo.maoSe || 'ᠰᠣᠩᠭᠤᠬᠤ' }}</text>
					</view>
				</view>
				
				<!-- 是否有角 -->
				<view class="w_full flex_row_between mt_10">
					<view class="w_30_p h_full text_center">
						<text class="vertical_text mn text_center fs_36">ᠡᠪᠡᠷ</text>
					</view>
					<view class="w_30_p h_full text_center bgc_eee border_radius_10 pv_10 border_box" @click="showBottomSheet(3)">
						<text class="vertical_text mn text_center fs_36">{{ cattleInfo.youJiao || 'ᠰᠣᠩᠭᠤᠬᠤ' }}</text>
					</view>
				</view>
			</view>
			
			<view class="w_full border_radius_10 bgc_fff p_10 border_box mt_20">
				<!-- 出生日期 -->
				<view class="w_full h_100 flex_row_between">
					<view class="w_30_p h_full text_center">
						<text class="vertical_text mn text_center fs_36">ᠲᠥᠷᠦᠭᠰᠡᠨ ᠡᠳᠦᠷ</text>
					</view>
					<view class="w_60_p">
						<uni-datetime-picker type="date" :clear-icon="true" v-model="cattleInfo.birthDay" placeholder=" " />
					</view>
				</view>
				
				<!-- 养殖类别 -->
				<view class="w_full h_100 flex_row_between mt_10">
					<view class="w_30_p h_full text_center">
						<text class="vertical_text mn text_center fs_36">ᠲᠡᠵᠢᠭᠡᠨ ᠦᠷᠡᠵᠢᠭᠦᠯᠬᠦ ᠲᠥᠷᠦᠯ ᠵᠦᠢᠯ</text>
					</view>
					<view class="w_30_p h_full text_center bgc_eee border_radius_10 pv_10 border_box" @click="showBottomSheet(4)">
						<text class="vertical_text mn text_center fs_36">{{ cattleInfo.yangZhiLeiBie || 'ᠰᠣᠩᠭᠤᠬᠤ' }}</text>
					</view>
				</view>
				
				<!-- 检疫证明 -->
				<view class="w_full h_100 flex_row_between mt_10">
					<view class="w_30_p h_full text_center">
						<text class="vertical_text mn text_center fs_36">ᠱᠢᠯᠭᠠᠨ ᠪᠠᠢᠴᠠᠭᠠᠬᠤ ᠭᠡᠷᠡᠴᠢ</text>
					</view>
					<view class="w_30_p h_full text_center bgc_eee border_radius_10 pv_10 border_box" @click="showBottomSheet(5)">
						<text class="vertical_text mn text_center fs_36">{{ cattleInfo.jianYanZhengMing || 'ᠰᠣᠩᠭᠤᠬᠤ' }}</text>
					</view>
				</view>
				
				<!-- 体重 -->
				<view class="w_full h_100 flex_row_between mt_10">
					<view class="w_30_p h_full text_center">
						<text class="vertical_text mn text_center fs_36">ᠪᠡᠶ᠎ᠡ᠎ᠶᠢᠨ ᠬᠦᠨᠳᠦ (kg)</text>
					</view>
					<view class="w_30_p h_full text_center bgc_eee border_radius_10 pv_10 border_box">
						<input class="mt_15" type="number" v-model="cattleInfo.tiZhong" >
					</view>
				</view>
				
				<!-- 产地 -->
				<view class="w_full h_100 flex_row_between mt_10">
					<view class="w_30_p h_full text_center">
						<text class="vertical_text mn text_center fs_36">ᠭᠠᠷᠤᠯᠲᠠ᠎ᠶᠢᠨ ᠭᠠᠵᠠᠷ</text>
					</view>
					<view class="w_60_p h_full text_center bgc_eee border_radius_10 pv_10 border_box" @click="showBottomSheet(6)">
						<text class="vertical_text mn text_center fs_36">{{ cattleInfo.chanDi || 'ᠰᠣᠩᠭᠤᠬᠤ' }}</text>
					</view>
				</view>
			</view>
			
			<view class="w_full h_90 lh_90 border_radius_10 bgc_1c9aa0 mt_10 text_center color_fff">
				<i class="iconfont icon-tijiao color_fff fs_40_i" @click="saveUpdate()"></i>
			</view>
		</view>
		
		<view class="bottom_sheet_box w_full h_full relative" v-if="isShowBottomSheet" @click="isShowBottomSheet = false">
			<view class="select_box absolute bottom_0 left_0">
				<view class="w_full mt_100 ph_30 border_box flex_row_around" v-if="selectType == 0">
					<view class="w_40" v-for="(item, index) in selectGender" :key="index">
						<text class="vertical_text mn text_center fs_36 float_left" @click="cattleInfo.xingBie = item.name">{{item.name }}</text>
					</view>
				</view>
				<view class="w_full mt_100 ph_30 border_box flex_row_around" v-if="selectType == 1">
					<view class="w_40" v-for="(item, index) in selectPinZhong" :key="index">
						<text class="vertical_text mn text_center fs_36 float_left" @click="cattleInfo.pinZhong = item.name">{{item.name }}</text>
					</view>
				</view>
				<view class="w_full mt_100 ph_30 border_box flex_row_around" v-if="selectType == 2">
					<view class="w_40" v-for="(item, index) in selectPinZhong" :key="index">
						<text class="vertical_text mn text_center fs_36 float_left" @click="cattleInfo.pinZhong = item.name">{{item.name }}</text>
					</view>
				</view>
				<view class="w_full mt_100 ph_30 border_box flex_row_around" v-if="selectType == 3">
					<view class="w_40" v-for="(item, index) in selectJiao" :key="index">
						<text class="vertical_text mn text_center fs_36 float_left" @click="cattleInfo.youJiao = item.name">{{item.name }}</text>
					</view>
				</view>
				<view class="w_full mt_100 ph_30 border_box flex_row_around" v-if="selectType == 4">
					<view class="w_40" v-for="(item, index) in selectYangZhiLeiBie" :key="index">
						<text class="vertical_text mn text_center fs_36 float_left" @click="cattleInfo.yangZhiLeiBie = item.name">{{item.name }}</text>
					</view>
				</view>
				<view class="w_full mt_100 ph_30 border_box flex_row_around" v-if="selectType == 5">
					<view class="w_40" v-for="(item, index) in selectJianYiZhengMing" :key="index">
						<text class="vertical_text mn text_center fs_36 float_left" @click="cattleInfo.jianYanZhengMing = item.name">{{item.name }}</text>
					</view>
				</view>
				<view class="w_full mt_100 ph_30 border_box flex_row_around" v-if="selectType == 6">
					<view class="w_40" v-for="(item, index) in selectChanDi" :key="index">
						<text class="vertical_text mn text_center fs_36 float_left" @click="cattleInfo.chanDi = item.name">{{item.name }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import getSystemInfo from '../../mixins/basic.js'
	import NET from '@/utils/request.js'
	import API from '@/config/api.js'
	
	export default {
		mixins: [getSystemInfo],
		data() {
			return {
				isShowBottomSheet: false,
				selectType: '',
				selectList: [
					{ value: 0, name: "ᠡᠷ᠎ᠡ" },
					{ value: 1, name: "ᠡᠮ᠎ᠡ" },
				],
				
				erBiaoHao: '',
				cattleInfo: {
					xingBie: '',
					pinZhong: '',
					maoSe: '',
					youJiao: '',
					birthDay: '',
					yangZhiLeiBie: '',
					jianYanZhengMing: '',
					tiZhong: '',
					chanDi: ''
				},
				
				selectGender: [
					{ value: 0, name: "ᠡᠷ᠎ᠡ" },
					{ value: 1, name: "ᠡᠮ᠎ᠡ" },
				],
				
				selectPinZhong: [
					{ value: 0, name: "ᠲᠥᠷᠦᠯ ᠵᠦᠢᠯ1" },
					{ value: 1, name: "ᠲᠥᠷᠦᠯ ᠵᠦᠢᠯ2" },
					{ value: 2, name: "ᠲᠥᠷᠦᠯ ᠵᠦᠢᠯ3" },
					{ value: 3, name: "ᠲᠥᠷᠦᠯ ᠵᠦᠢᠯ4" },
				],
				selectJiao: [
					{ value: 1, name: "ᠪᠠᠢᠨ᠎ᠠ" },
					{ value: 0, name: "ᠥᠬᠡᠢ" },
				],
				selectYangZhiLeiBie: [
					{ value: 0, name: "ᠲᠥᠷᠦᠯ ᠵᠦᠢᠯ1" },
					{ value: 1, name: "ᠲᠥᠷᠦᠯ ᠵᠦᠢᠯ2" },
					{ value: 2, name: "ᠲᠥᠷᠦᠯ ᠵᠦᠢᠯ3" },
					{ value: 3, name: "ᠲᠥᠷᠦᠯ ᠵᠦᠢᠯ4" },
				],
				selectJianYiZhengMing: [
					{ value: 0, name: "ᠡᠷᠡᠭᠦᠯ ᠴᠢᠭᠢᠷᠠᠭ" },
					{ value: 1, name: "ᠡᠪᠡᠳᠴᠢᠨ ᠡᠮᠭᠡᠭ" },
					{ value: 2, name: "ᠲᠥᠷᠦᠯ ᠵᠦᠢᠯ3" },
					{ value: 3, name: "ᠲᠥᠷᠦᠯ ᠵᠦᠢᠯ4" },
				],
				selectChanDi: [
					{ value: 0, name: "ᠲᠦᠩᠯᠢᠶᠣᠣ" },
					{ value: 1, name: "ᠬᠢᠩᠭᠠᠨ ᠠᠢᠮᠠᠭ" },
					{ value: 2, name: "ᠱᠢᠯᠢ᠎ᠶᠢᠨ ᠭᠣᠣᠯ" },
					{ value: 3, name: "ᠤᠯᠠᠭᠠᠨᠬᠠᠳᠠ" },
				]
			}
		},
		onLoad(options) {
			// 获取设备高度
			this.getSystemHeight()
	
		},
		methods: {
			// 选择图片
			chooseImg() {
				let that = this
				uni.chooseImage({
					count: 3,
					sizeType: ['original', 'compressed'],  
					sourceType: ['album', 'camera'], 
					success: function (res) {
						console.log(res)
						
						for (let i in res.tempFilePaths) {
							let params = {
								file: res.tempFilePaths[i],
								type: 'image'
							}
							
							NET.upload(API.uploadFile, params, res.tempFiles[i].path)
							.then(res => {
								let respon = JSON.parse(res)
								if (respon.code == 200) {						
									that.imgList.push(respon.data) 
								}
							})
							.catch(err => {
								uni.showToast({
									title: '图片上传失败！',
									icon: 'none'
								})
								console.error('图片上传失败！', err)
							})
						}
					}
				})
			},
			
			// 删除图片
			deleteImg(index) {5
				this.updateData.flies.splice(index, 1)
			},
		
			// 扫描条码
			saoMiaoTiaoMa() {
				let that = this
				// 调起条码扫描
				uni.scanCode({
					scanType: ['qrCode'],
					success: function (res) {						
						that.erBiaoHao = res.result
					},
					fail: () => {
						uni.showToast({
							title: '扫码失败！',
							icon: 'error'
						})
					}
				});
			},
			
			// 显示 选择 dialog
			showBottomSheet(val) {
				this.isShowBottomSheet = true
				this.selectType = val
			},
			
			// 保存修改
			saveUpdate() {
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.active_tab { border-bottom: 8rpx solid #ffa500; }
	
	.update_yang_zhi_box {
		width: 100%;
		position: relative;
		
		// 标题
		.title_box {
			width: 80rpx;
			height: 100%;
			box-sizing: border-box;
			position: relative;
			float: left;
		}
	
		// 内容
		.content_box {
			width: calc(100% - 80rpx);
			height: 100%;
			overflow-y: auto;
			float: left;
			box-sizing: border-box;
			// border: 1px solid #090;
			
		}
		
		.bottom_sheet_box {
			background-color: rgba(#212121, .5);
			
			.select_box {
				width: 100%;
				height: 30%;
				background-color: #fff;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
			}
		}
	}
</style>

<style lang="less">
	@import url('~@/static/css/plugin.css');
	
	.uni-date { margin-top: 0 !important; }
	
	.uni-select__input-placeholder, .uni-select__input-text {
		font-size: 40rpx !important;
	}
	
	.uni-select__selector-scroll {
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		
		.uni-select__selector-item {
			float: left;
			display: inline-block;
			padding: 0 !important;
			
			text {
				writing-mode: vertical-lr;
				font-family: 'mn';
				font-size: 40rpx !important;
			}
		}
	}
	
	.uni-select__input-box {
		height: 60rpx !important; 
	}
	
	.uni-select__input-text {
		writing-mode: vertical-lr;
		font-family: 'mn';
		font-size: 40rpx !important;
	}
	
</style>